<template>
  <div>
    <button @click="isShow = !isShow">显示/隐藏</button>
    <!-- 1.使用transition内置组件包裹需要执行动画的元素,并通过name属性指定过渡动画类名为：why -->
    <transition name="fade">
      <h4 v-if="isShow" style="border: 1px solid #ddd; width: 100px; font-size: 30px">
        Hello World
      </h4>
    </transition>
    <hr />
    <h4>CSS 动画</h4>
    <transition name="bounce">
      <div class="box" v-show="isShow">
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eius excepturi similique sequi
        ratione natus quasi perferendis vero consectetur voluptas tempore nihil ducimus impedit
        ipsam, vel totam aliquid reiciendis cum. Corporis sunt consequatur in non similique vel
        sapiente quaerat a, quos aperiam nemo molestiae error id nisi, et eaque maiores sint.
        Inventore similique ipsum quasi quis aut, voluptatem assumenda dolore maxime quisquam
        dolorum rerum consequatur ad. Autem voluptatem sint velit. Dignissimos iste asperiores
        expedita corrupti nisi, quo tenetur, ullam incidunt minima vel, commodi error illum in.
        Molestiae illo voluptatibus labore architecto, autem minus odit perspiciatis expedita
        similique iste, perferendis placeat eos!
      </div>
    </transition>
    <h3>第三方库animate.css</h3>
    <transition
      appear
      :duration="{ enter: 300, leave: 200 }"
      enter-active-class="animate__animated animate__swing"
      leave-active-class="animate__animated animate__backOutLeft"
      @before-enter="beforeEnter"
      @enter="enter"
      @after-enter="afterEnter"
      @enter-cancelled="enterCancelled"
    >
      <div class="box2" v-show="isShow"></div>
    </transition
    >
    <hr />
    <h2>列表过渡</h2>
    <div id="list-demo" class="demo">
      <button v-on:click="add">Add</button>
      <button v-on:click="remove">Remove</button>
      <TransitionGroup name="list" tag="ul">
        <li v-for="item in items" :key="item">
          {{ item }}
        </li>
      </TransitionGroup>
      <div>
        <input type="text" v-model.number="num" />
      </div>
      <p>{{ animatedNum }}</p>
    </div>
  </div>
</template>

<script>
import 'animate.css'
import gsap from 'gsap'
export default {
  data() {
    return {
      isShow: true,
      items: [1, 2, 3, 4, 5, 6, 7, 8, 9],
      nextNum: 10,
      num: '',
      agentNum: 0
    }
  },
  computed: {
    animatedNum() {
      return this.agentNum
    }
  },
  watch: {
    num(newVal) {
      gsap.to(this.$data, { duration: 0.5, agentNum: newVal })
      console.log('this.$data: ', this.$data)
    }
  },

  methods: {
    randomIndex() {
      return Math.floor(Math.random() * this.items.length)
    },
    add() {
      this.items.splice(this.randomIndex(), 0, this.nextNum++)
    },
    remove() {
      this.items.splice(this.randomIndex(), 1)
    },
    beforeEnter(el) {
      //动画/过渡准备进入前触发
      console.log('动画/过渡准备进入前触发beforeEnter:', el)
    },
    enter(el) {
      //元素进入 enter-active触发
      console.log('enter-active触发', el)

      // done() //执行done的时候entert-active过渡结束
    },
    afterEnter(el) {
      //进入过渡/动画结束后
      console.log('过渡/动画结束后afterEnter', el)
    },
    enterCancelled(el) {
      console.log('cancel', el)
    }
  }
}
</script>

// 2.实现h4元素的过渡动画
<style scoped>
/* h4元素进入之前和离开之后应用的样式 */
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
/* h4元素进入到和开始离开应用的样式 */
.fade-enter-to,
.fade-leave {
  opacity: 1;
}
/* h4元素在整个进入/离开过渡的阶段中应用的样式 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 2s ease;
}
.box {
  width: 300px;
  height: 300px;
  margin: 50px auto;
  overflow: hidden;
}
@keyframes bounce {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}
.bounce-enter-active {
  animation: bounce 0.5s;
}
.bounce-leave-active {
  animation: bounce 0.5s reverse;
}
.box2 {
  width: 100px;
  height: 100px;
  background-color: #000;
  margin: 50px auto;
}
.list-item {
  display: inline-block;
  margin-right: 10px;
}
.list-enter-active,
.list-leave-active {
  transition: all 1s;
}

.list-enter-active,
.list-leave-active {
  transition: all 0.5s ease;
}
.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateX(30px);
}
#list-demo {
  height: 200px;
}
</style>
